<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>D3交互式数据可视化</title>
</head>
<body>
	<ul>
		<li>弧生成器：起始角度、终止角度、内半径、外半径</li>
		<li>访问器：innerRadius()、outerRadius()、atartAngle()、endAngle()</li>
		<li>角度单位是弧度</li>
		<li>arc.centroid()可计算弧的中心位置</li>
		<li>一般是不知道startAngle和endAngle的，D3提供了将数据转换成角度的方法---叫做布局</li>
	</ul>
	<div class="arc">
		
	</div>
	<script src="js/d3_3.5.7.js"></script>
	<script>
		var width = 500;
		var height = 500
		var svg = d3.select(".arc").append('svg').attr({"width":width,"height":height});

		var dataset = {startAngle:0,endAngle:Math.PI * 0.75};
		var arcPath = d3.svg.arc().innerRadius(50).outerRadius(100);

		// svg.append("path").attr("d",arcPath(dataset))
		// 									.attr({"transform":"translate(100,100)","stroke":"black","stroke-width":"3px","fill":"yellow"})

		//绘制一个饼图
		var data = [
			{startAngle:0,endAngle:Math.PI * 0.6},
			{startAngle:Math.PI * 0.6,endAngle:Math.PI},
			{startAngle:Math.PI,endAngle:Math.PI * 1.7},
			{startAngle:Math.PI * 1.7,endAngle:Math.PI * 2}
		]	
		var path = d3.svg.arc()
									.innerRadius(0)
									.outerRadius(100)
		var color = d3.scale.category10();
		svg.selectAll("path").data(data).enter().append("path").attr("d",function(d) {
			return path(d)
		})
		.attr({"transform":"translate(250,250)","stroke":"black","stroke-width":"2px"}).attr("fill",function(d,i) {
			return color(i);
		})
		//添加文本
		svg.selectAll("text").data(data).enter().append("text")
				.attr("transform",function(d) {
					return "translate(250,250)" + "translate("+ path.centroid(d) + ")"
				})
				.attr({"text-anchor":"middle","fill":"white","font-size":"18px"})
				.text(function(d) {
					return Math.floor((d.endAngle - d.startAngle) * 180 / Math.PI) + "°";
				})
	</script>
</body>
</html>